<html>
<head>
    <title>vispy.js</title>
    <style type="text/css" rel="stylesheet">
    </style>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">

    <!-- JAVASCRIPT UTILS -->
    
    <script language="javascript" type="text/javascript" src="jquery-1.11.1.min.js"></script>
    <script language="javascript" type="text/javascript" src="jquery.mousewheel.min.js"></script>
    
    <script language="javascript" type="text/javascript" src="vispy.js"></script>
    
    <script type="text/javascript">
    
    function start() {
        document.oncontextmenu = function () { return false; };
    
        $.getJSON( "test2.json", function(gloo_export) {
            var c = document.getElementById('vispy-canvas');
            init_gl(c);
            //enable_blend(c);
            init_app(c);
            var n = new navigation();
            
            create_scene(c, gloo_export, [0., 0., 0., 1.]);
            update();
            
            function update() {
                c.program.set_data('u_pan', [n.tx, n.ty]);
                c.program.set_data('u_scale', [n.sx, n.sy]);
                c.update();
            }
            
            c.on_mouse_move = function(e) {
                if (e.is_dragging) {
                    var p = normalize_pos(c, e.pos);
                    var p_ = normalize_pos(c, e.last_event.pos);
                    var p_p = normalize_pos(c, e.press_event.pos);
                    var dx = p[0] - p_[0];
                    var dy = p[1] - p_[1];
                    
                    if (e.button == 0) {
                        n.pan([dx, dy]);
                    }
                    else if (e.button == 2) {
                        n.zoom([dx, dy], p_p);
                    }
                    update();
                }
            }
            
            c.on_mouse_wheel = function(e) {
                var pos = normalize_pos(c, e.pos);
                n.zoom([e.delta[1]*.1, e.delta[1]*.1], pos);
                update();
            }
            
        });
    }

    </script>
</head>
<body onload="start();">
    <canvas id="vispy-canvas" tabindex="1" width="1024" height="768"></canvas>
</body>
</html>